<template>
  <div class="screen-container">
    <div class="fullscreen-bg">
      <div class="dashboard-grid">
        <!-- 左侧指标 -->
        <div class="metrics-panel">
          <div 
            v-for="metric in metrics"
            :key="metric.id"
            class="metric-card"
          >
            <h3>{{ metric.title }}</h3>
            <div class="metric-value">{{ metric.value }}</div>
            <div class="metric-trend">
              <span :style="{color: metric.trend > 0 ? '#00ff88' : '#ff003c'}">
                {{ metric.trend > 0 ? '↑' : '↓' }} {{ Math.abs(metric.trend) }}%
              </span>
            </div>
          </div>
        </div>
        
        <!-- 中间地图 -->
        <div class="map-container">
          <div ref="mapChart" class="chart-container"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const mapChart = ref(null)
const metrics = ref([
  { id: 1, title: '实时在园人数', value: '1,234', trend: 2.5 },
  // 更多指标数据...
])

onMounted(() => {
  const chart = echarts.init(mapChart.value)
  chart.setOption({
    // 全屏地图图表配置
  })
})
</script>

<style lang="scss" scoped>
.screen-container {
  height: 100vh;
  background: #000;
}

.fullscreen-bg {
  position: relative;
  height: 100%;
  background: radial-gradient(circle at center, #0a0e2a, #000);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  height: 100vh;
}

.metrics-panel {
  padding: 20px;
  background: rgba(16, 22, 45, 0.8);
}

.metric-card {
  margin: 15px 0;
  padding: 20px;
  background: rgba(255,255,255,0.05);
  border-left: 4px solid #409EFF;
  
  h3 {
    color: #00ff88;
    margin: 0 0 10px 0;
  }
}

.metric-value {
  font-size: 2.5em;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(64,158,255,0.5);
}
</style> 